<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>捷士通邮件客户端</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="js/jconfirm/jquery-confirm.min.css" rel="stylesheet">
    <link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
    <link href="css/eui.css" rel="stylesheet">
  </head>
  <body>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-primary">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <i class="mdi mdi-alert-octagram"></i>管理设置
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <div class="row">
              <div class="p-l-5">
                <div class="p-lr-15"><label for="set_admin_pwd">管理密码:</label></div>
                <div class="form-group col-md-10 p-r-5 has-info">
                  <input class="form-control" type="text" id="set_admin_pwd" name="set_admin_pwd" placeholder="...">
                </div>
                <div class="form-group col-md-2 p-l-5">
                  <button class="btn btn-info" type="button" id="set_admin_pwd_btn">修改</button>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-6">
                <div class="p-lr-15"><label for="set_email_account">邮箱账号:</label></div>
                <div class="form-group p-l-5">
                  <input class="form-control" type="text" id="set_email_account" placeholder="...">
                </div>
              </div>
              <div class="col-xs-6">
                <div class="p-lr-15"><label for="set_email_pwd">邮箱密码:</label></div>
                <div class="form-group p-l-5">
                  <input class="form-control" type="text" id="set_email_pwd" placeholder="...">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-6">
                <div class="p-lr-15"><label for="set_email_host">主机:</label></div>
                <div class="form-group p-l-5">
                  <input class="form-control" type="text" id="set_email_host" placeholder="...">
                </div>
              </div>
              <div class="col-xs-3">
                <div class="p-lr-15"><label for="set_email_port">端口:</label></div>
                <div class="form-group p-l-5">
                  <input class="form-control" type="number" id="set_email_port" placeholder="...">
                </div>
              </div>
              <div class="col-xs-3">
                <div class="p-lr-15"><label for="set_email_ssl">SSL:</label></div>
                <div class="form-group p-l-5">
                  <select class="form-control" id="set_email_ssl" placeholder="...">
                    <option value="是">是</option>
                    <option vlaue="否">否</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="panel-footer">
            <button type="button" class="btn btn-warning" style="width:100%" id="set_save_btn">保存设置</button>
          </div>
        </div>
      </div>
      <div class="panel panel-cyan">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <i class="mdi mdi-account-settings-variant"></i>发件人设置
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-body">
            <div id="toolbar" class="toolbar-btn-action p-t-5">
              <button id="add_account_btn" type="button" class="btn btn-primary m-r-5">
                <span class="mdi mdi-cloud-sync" aria-hidden="true"></span>新增账号
              </button>
              <button class="btn btn-danger" id="reset_account_btn">
                <span class="mdi mdi-webpack" aria-hidden="true"></span>重置
              </button>              
            </div>
            <table id="account_table"></table>
          </div>
        </div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <i class="mdi mdi-email-open-outline"></i>收件箱
            </a>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-body">
            <div class="row">
              <div class="form-group p-t-5 col-xs-2" style="padding-left:50px;"><label for="account_sel">访问账号:</label></div>
              <div class="form-group col-xs-3"><select class="form-control" id="account_sel" name="account_sel">
              </select></div>
              <div class="form-group col-xs-2 p-r-5">
                <input class="form-control" type="password" id="account_pwd" name="account_pwd" placeholder="访问密码...">
              </div>
              <div class="form-group col-xs-3 p-r-5">
                <input class="form-control js-datepicker m-b-10" type="text" id="account_date" name="account_date" data-date-format="yyyy/mm/dd" placeholder="邮件开始日期...">
              </div>
              <div class="col-xs-2"><button class="btn btn-warning" id="load_account_email_btn" data-loading-text="加载中..." autocomplete="off">
                <span class="mdi mdi-webpack" aria-hidden="true"></span>加载邮件
              </button>
              </div>
            </div>
            <table id="email_table"></table>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/jconfirm/jquery-confirm.min.js"></script>
    <script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script type="text/javascript" src="js/lightyear.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>
    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
    <script src="./account.js"></script>
    <script src="./email.js"></script>
  </body>
</html>
